
<script setup>
  const sectionProps = defineProps({
    title: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: Object,
      default: {}
    }
  })
</script>

<template>
  <view class="cs" :style="{...sectionProps.customStyle}">
    <view class="cs-h">
      <view class="cs-h-title">
        {{ sectionProps.title }}
      </view>

      <view class="cs-h-right">
        <slot name="right"></slot>
        <uni-icons
          v-if="sectionProps.showArrow"
          color="#c3c3c5"
          size="16"
          type="forward"
          ></uni-icons>
      </view>
    </view>
    <slot></slot>
  </view>
</template>


<style lang="scss">
  .cs {
    padding: 40rpx 30rpx 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }

  .cs-h {
    display: flex;
    justify-content: space-between;
    line-height: 1;
    margin-bottom: 20rpx;
  }

  .cs-h-title {
    font-size: 32rpx;
    color: #333;
  }

  .cs-h-right {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #c3c3c5;
  }
</style>